<template>
  <div class="echats3" v-echartsResize="echartsResize" ref="echartsRef">
  </div>
</template>
<script  setup>
import { reactive, ref, onMounted } from 'vue'
import { getCoordinatePoint } from '@/api/seismicInformations.js'
import latestTtimeStamp from '@/utlis/latestTtimeStamp.js'
import * as echarts from 'echarts'
let echartsInit = ref(null)
const echartsRef = ref()
let option = reactive({
  title: {
    text: '近一年各地区地震等级图',
    textStyle: {
      //---主标题内容样式
      color: '#fff'
    },
    // subtext: '副标题', //---副标题内容样式
    // subtextStyle: {
    //   color: '#bbb'
    // },
    padding: [25, 0, 0, 95] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  color: ['#33CCFF', '#FFFF66', '#FFCC66', '#FF3333'],
  // legend: {},
  grid: {
    left: '2%',
    right: '6%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: {
      lineStyle: {
        type: 'dashed' //虚线
      },
      show: true //隐藏
    }
  },
  yAxis: {
    type: 'category',
    data: [],

    axisLabel: {
      interval: 0,
      // rotate: 45,
      formatter: function(value) {
        var num = 5 //每行显示字数
        var valLength = value.length //该项x轴字数
        if (valLength > num) {
          let temp = value.substring(0, num) + '...'
          return temp
        }
        return value
      }
    }
  },
  dataZoom: [
    {
      type: 'slider',
      // handleSize: 20, // 两边手柄尺寸
      height: 9,
      yAxisIndex: [0],
      bottom: '0%',
      width: '8.5',
      height: '100%',
      // start: 0,
      // end: 15,
      maxValueSpan: 10,
      // handleIcon:
      //   'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',
      handleSize: '6',
      borderColor: '#ffffff',
      fillerColor: '#d5d4d4',
      backgroundColor: 'rgba(0,0,0,0.3)', //两边未选中的滑动条区域的颜色
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
      realtime: true, //是否实时更新
      filterMode: 'filter',
      handleStyle: {
        /*手柄的样式*/
        color: '#d5d4d4',
        borderColor: '#d5d4d4'
      },
      // handleStyle: {
      //   borderRadius: '20',
      //   color: '#a8a8a8'
      // },
      labelFormatter: value => {
        return ''
      },
      textStyle: {
        show: false,
        display: 'none',
        opacity: 0,
        color: '#fff'
      }
    },
    {
      type: 'inside', // 支持内部鼠标滚动平移
      yAxisIndex: [0],
      zoomOnMouseWheel: false, // 关闭滚轮缩放
      moveOnMouseWheel: true, // 开启滚轮平移
      moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
    }
  ],

  series: [
    {
      name: '等级',
      type: 'bar',
      data: [],
      // showBackground: true,
      itemStyle: {
        label: {
          show: true, //开启显示数值
          position: 'top', //数值在上方显示
          textStyle: {
            //数值样式
            color: '#D1DBFF', //字体颜色
            fontSize: 14 //字体大小
          }
        },
        color: param => {
          let num = param.data
          if (+num < 3) {
            return '#33CCFF'
          } else if (+num >= 3 && +num < 5) {
            return '#FFFF66'
          } else if (+num >= 5 && +num < 7) {
            return '#FFCC66'
          } else if (+num >= 7) {
            return '#FF3333'
          }
          return '#33CCFF'
        }
      }
    }
  ]
})

const echartsInitFn = () => {
  echartsInit = echarts.init(echartsRef.value)
  echartsInit.setOption(option, true)
}
const echartsResize = () => {
  echartsInit?.resize()
}
const day_365 = 24 * 60 * 60 * 365 * 1000
const getCoordinatePointFn = timestamp => {
  getCoordinatePoint(timestamp).then(res => {
    if (res.code === 200) {
      res.data.forEach(element => {
        option.yAxis.data.push(element.location)
        option.series[0].data.push(element.earthquake_magnitude)
      })
      echartsInitFn()
    }
  })
}
onMounted(() => {
  echartsInitFn()
  getCoordinatePointFn(latestTtimeStamp(day_365))
})
</script>
<style scoped>
.echats3 {
  width: 100%;
  height: 100%;
}
</style>